<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div id="flag">
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url="ws://"+location.host+"/hall";//URL
        var ws_hdl=null;//websocket操作句柄
        
        //当前页面关闭时的回调,页面关闭立即断开连接
        window.onbeforeunload=function()
        {
            ws_hdl.close();
        }

        //匹配按钮有两个状态：正在匹配中和没有匹配
        var button_flag="stop";//按钮初始状态为没有进入匹配
        //匹配按钮点击事件
        var mb=document.getElementById("match-button");
        //给匹配按钮添加点击事件
        mb.onclick=function()
        {
            if(button_flag=="stop")
            {
                //发送开始匹配请求
                var req={optype:"match_start"};
                ws_hdl.send(JSON.stringify(req));
            }
            else
            {
                //发送结束匹配请求
                var req={optype:"match_stop"};
                ws_hdl.send(JSON.stringify(req));
                var stop=document.getElementById("stop");
                if(stop!=null)
                {
                    stop.remove();
                }
            }
        }

        function get_user_info()
        {
            $.ajax({
                url:"/info",
                type:"get",
                success:function(res)
                {
                    var info_html="<p>"+"用户："+res.username+"  积分："+res.score+"</br>"
                                 +"比赛场次："+res.total_count+" 获胜场次："+res.win_count+"</p>";
                    var screen_div=document.getElementById("screen");
                    screen_div.innerHTML=info_html;
                    
                    ws_hdl=new WebSocket(ws_url);
                    //设置回调函数
                    ws_hdl.onopen=ws_onopen;
                    ws_hdl.onclose=ws_onclose;
                    ws_hdl.onerror=ws_onerror;
                    ws_hdl.onmessage=ws_onmessage;
                },
                error:function(xhr)
                {
                    alert(JSON.stringify(xhr));
                    location.assign("/login.html");
                }
            })
        }
        function ws_onopen()
        {
            console.log("websocket onopen");
        }
        function ws_onclose()
        {
            console.log("websocket onclose");
        }
        function ws_onerror()
        {
            console.log("websocket onerror");
        }
        function ws_onmessage(evt)
        {   
            //alert(evt.data);
            //alert(JSON.stringify(evt));
            var resp=JSON.parse(evt.data);
            if(resp.result==false)
            {
                alert(evt.data);
                location.assign("/login.html");
            }
            else
            {
                if(resp["optype"]=="hall_ready")
                {
                    alert("游戏大厅建立成功！");
                    //console.log("游戏大厅建立成功！");
                }
                else if(resp["optype"]=="match_success")
                {
                    //alert("匹配成功！");
                    console.log("匹配成功！")
                    location.assign("/game_room.html");
                }
                else if(resp["optype"]=="match_start")
                {
                    console.log("正在匹配中...");
                    button_flag="start";
                    mb.innerHTML="正在匹配中...";
                    //添加结束匹配按钮
                    var flag_div=document.getElementById("flag");
                    var button_div=document.createElement("div");
                    button_div.innerHTML="取消匹配";
                    button_div.onclick=function()
                    {
                        //发送结束匹配请求
                        var req={optype:"match_stop"};
                        ws_hdl.send(JSON.stringify(req));
                        //location.assign("/game_hall.html");
                        document.getElementById("stop").remove();
                    }
                    var br_div=document.createElement("br");
                    //给结束匹配按钮添加id属性
                    button_div.setAttribute("id","stop");
                    //添加按钮到flag区域    
                    flag_div.appendChild(button_div);
                }
                else if(resp["optype"]=="match_stop")
                {
                    console.log("结束匹配");
                    button_flag="stop";
                    mb.innerHTML="开始匹配";
                }
                else
                {
                    alert(evt.data);
                    location.assign("/login.html");
                }
            }
        }

        get_user_info();
    </script>
</body>
</html>